<template>
  <div class="containerWrap">
    <div class="headWrap">
      <div class="content_title">活动管理>>评论管理</div>
      <div class="search">
        <el-form :inline="true" class="demo-form-inline searchBox">
          <el-form-item label="关键字">
            <el-input
              placeholder="关键词搜索"
              icon="search"
              :on-icon-click="searchByWord">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <el-dropdown>
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown>
  <span class="el-dropdown-link">
    审核状态<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>未通过</el-dropdown-item>
          <el-dropdown-item>审核通过</el-dropdown-item>
          <el-dropdown-item>审核不通过</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button @click="addComment">新增评论</el-button>
      <el-button @click="addCommentUser">新增评论人</el-button>
      <el-button @click="deleteSelected">批量删除</el-button>
      <el-button @click="rejectSelected">批量未通过审核</el-button>
      <el-button @click="approveSelected">批量审核</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="check">
          <template slot-scope="scope">
            <el-checkbox></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="头像">
        </el-table-column>
        <el-table-column
          prop="address"
          label="评论人">
        </el-table-column>
        <el-table-column
          prop="address"
          label="评论内容">
        </el-table-column>
        <el-table-column
          prop="address"
          label="评论时间">
        </el-table-column>
        <el-table-column
          prop="address"
          label="置顶">
        </el-table-column>
        <el-table-column
          prop="address"
          label="审核">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="reply">回复</el-button>
            <el-button @click="deleteComment()" size="small">删除</el-button>
            <el-button type="info" size="small" @click="rejectPass()">不通过审核</el-button>
            <el-button type="info" size="small" @click="commentManager()">置顶</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--回复弹窗-->
      <el-dialog
        title="评论回复"
        :visible.sync="replyCommentVisible"
        width="30%">
        <el-form class="demo-form-inline" label-width="100px">
          <el-form-item label="评论者昵称">
            <el-input placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="评论内容">
            <el-input type='textarea' placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="请选择回复人">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form-item label="回复内容">
          <el-input type='textarea' placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="重置状态">
          <el-radio label="1">置顶</el-radio>
          <el-radio label="2">不置顶</el-radio>
        </el-form-item>
        <span slot="footer" class="dialog-footer">
    <el-button @click="replyCommentVisible = false">取 消</el-button>
    <el-button type="primary" @click="commentSure">确 定</el-button>
  </span>
      </el-dialog>
      <!--新增评论-->
      <el-dialog
        title="评论回复"
        :visible.sync="addCommentVisible"
        width="30%">
        <el-form class="demo-form-inline" label-width="100px">
          <el-form-item label="选择活动">
            <el-select value="label" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="评论人">
            <el-select value="label" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        <el-form-item label="评论内容">
          <el-input type='textarea' placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="置顶状态">
          <el-radio label="1">置顶</el-radio>
          <el-radio label="2">不置顶</el-radio>
        </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addCommentSubmit">保存活动基本信息</el-button>
  </span>
      </el-dialog>

      <!--新增评论人-->
      <el-dialog
        title="新增评论人"
        :visible.sync="addCommentUserVisible"
        width="30%">
        <CommentUser></CommentUser>
      </el-dialog>
    </div>
  </div>
</template>


<script>
  import CommentUser from './commentUser.vue';
  export default {
    data () {
      return {
        tableData: [{'id': 1}],
        activeName: '0',
        options: [{'label': 'label', 'value': 'value'}],
        addCommentVisible: false, // 新增评论显示
        addCommentUserVisible: false, // 新增评论用户显示
        replyCommentVisible: false  // 评论回复
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 评论弹框，确定按钮
      commentSure () {
        this.replyCommentVisible = false;
        alert('评论回复');
      },
      // 编辑
      edit () {
        alert('编辑');
      },
      // 拒绝通过
      rejectPass () {
        alert('拒绝通过');
      },
      // 删除评论
      deleteComment () {
        alert('删除评论');
      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        alert('切换Tab页签');
      },
      // 回复评论
      reply () {
        this.replyCommentVisible = true;
      },
      addComment () {
        this.addCommentVisible = true;
      },
      addCommentSubmit () {
        alert('新增评论确认');
        // 提交成功后隐藏
        this.addCommentVisible = false;
      },
      addCommentUser () {
        this.addCommentUserVisible = true;
      },
      addCommentUserSubmit () {
        alert('新增评论用户确认');
        this.addCommentUserVisible = false;
      },
      deleteSelected () {
        alert('批量删除');
      },
      rejectSelected () {
        alert('批量未通过审核');
      },
      approveSelected () {
        alert('批量审核');
      }
    },
    components: {CommentUser},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
